import { Dropdown, Form, Menu, Modal, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { RouteComponentPropsPlus } from '../../util/routerBase';
import { LoginOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import './Header.scss';
import { connect } from 'react-redux';
import Login from '../../pages/index/Login';
import { useForm } from 'antd/lib/form/Form';
import ChangePw from '../../pages/index/ChangePw';
import { getUserMsg, InitUserDetail, IUserDetail } from '../../api/threeApi';

const { Option } = Select;

function Header(props: { currentRoute: RouteComponentPropsPlus | undefined; userInfo: any }): JSX.Element {
	const [currentKeys, setCurrentKeys] = useState<string[]>([]);
	const [userDetail, setUserDetail] = useState<IUserDetail>(InitUserDetail);
	const [visable, setVisable] = useState(false);
	const [isLogin, setIsLogin] = useState(false);

	useEffect(() => {
		props.currentRoute && setCurrentKeys([props.currentRoute.match.path]);
	}, [props]);

	useEffect(() => {
		getUserMsg()
			.then((res) => {
				setUserDetail(res.data);
				setIsLogin(true);
			})
			.catch((err) => {
				setIsLogin(false);
			});
	}, []);

	const menu = (
		<Menu>
			{/* <Menu.Item>
				<div className="d-f">
					<div className="pr8">
						<UserOutlined />
					</div>
					<div>
						<div>{props.userInfo.name}</div>
						<div className="c-hint-b">{props.userInfo.email}</div>
					</div>
				</div>
			</Menu.Item> */}

			{!isLogin ? (
				<Menu.Item
					onClick={() => {
						setVisable(true);
					}}
				>
					<LoginOutlined />
					登录
				</Menu.Item>
			) : null}
			{isLogin ? (
				<>
					<Menu.Item
						onClick={() => {
							props.currentRoute?.history.push(`/userCenter`);
						}}
					>
						<SettingOutlined />
						个人中心
					</Menu.Item>
					<Menu.Item
						onClick={() => {
							props.currentRoute?.history.push(`/userIndex/${userDetail.uid}`);
						}}
					>
						<SettingOutlined />
						个人主页
					</Menu.Item>
					<Menu.Item
						onClick={() => {
							props.currentRoute?.history.push(`/userSet`);
						}}
					>
						<LoginOutlined />
						设置
					</Menu.Item>
				</>
			) : null}

			{/* <Menu.Item
				onClick={() => {
					document.cookie = '';
					window.location.href =
						'http://home.dp.jpushoa.com/login/jiguang/?timestamp=' +
						new Date().getTime() +
						'&next=' +
						document.location.href;
				}}
			>
				<LoginOutlined />
				退出登录
			</Menu.Item> */}
		</Menu>
	);

	return (
		<>
			<Login
				visable={visable}
				onChange={(visable) => {
					setVisable(visable);
				}}
			/>

			<div className="nav">
				<div className="nav-inner d-f jc-b">
					<div className="d-f ac">
						{/* <svg className="icon fs22" aria-hidden="true">
						<use xlinkHref="#icon-logo" />
					</svg> */}
						<Link className="c-text-w fs16" to="/">
							<img className="nav-logo" src={require('../../image/logo.png').default} alt="" />
						</Link>
						<Menu
							className="ml64"
							onClick={(info) => {
								setCurrentKeys([info.key.toString()]);
							}}
							selectedKeys={currentKeys}
							mode="horizontal"
						>
							<Menu.Item key="/">
								<Link to="/">首页</Link>
							</Menu.Item>
							<Menu.Item key="/community">
								<Link to="/community">社区</Link>
							</Menu.Item>
							<Menu.Item key="/discovery">
								<Link to="/discovery">发现</Link>
							</Menu.Item>
							<Menu.Item key="/classroom">
								<Link to="/classroom">第二学堂</Link>
							</Menu.Item>
						</Menu>
					</div>

					<div className="d-f ac">
						<Dropdown overlay={menu}>
							<div className="pl24 d-f ac h100 cp">
								<img
									style={{ width: 58, maxHeight: 58 }}
									src={userDetail.avatar || require('../../image/user2.png').default}
									alt=""
								/>
							</div>
						</Dropdown>
						<div className="nav-start d-f ac jc ml32">
							<a href={process.env.REACT_APP_BASESCRATCH} target="_block" className="c-text-w">
								开始创作
							</a>
						</div>
					</div>
				</div>
			</div>
		</>
	);
}

const mapStateToProps = (state: { userInfo: any }) => {
	return {
		userInfo: state.userInfo,
	};
};

export default connect(mapStateToProps)(Header);
